<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"" rel="stylesheet">
    <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/mainbody.css">
</head>

<body>
    <div id="tabs">
        <ul>
            <!--<span class="tab"><li><a href="#tabs-1" title="">Tab 1</a><li class="fa fa-close"></li></li>
            </span>-->
        </ul>
        <div id="tabs_container">
            <!--<div id="tabs-1">
                12341234123412341234234
            </div>-->
        </div>
    </div>
    <!--End tabs-->


    <script src="../plugs/jquery-3.1.1.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <!--<script src="./js/tabulous.js"></script>-->
    <script>
        $(function () {

            //起始绑定点击事件，如果没有默认页，可删除
            // $('#tabs>ul>span>li>a').bind('click', function () {
            //     $('#tabs_container').children('div').css('display', 'none');
            //     $('#tabs>ul>span>li>a').removeClass('active');
            //     $(this).addClass('active');
            //     $(($(this).attr('href'))).fadeIn();
            // });
            // $('.fa-close').bind('click', function () {
            //     $(this).fadeOut();
            //     $(this).prev().fadeOut();
            //     $($(this).prev().children('a').attr('href')).remove();
            //     $(this).prev().remove();
            //     $(this).parent().remove();
            //     $(this).next().children('a').trigger('click');
            // });

            // //手动触发第一个标签页的点击事件
            // $("#tabs>ul>span:eq(0) a").trigger('click');

            //添加标签函数
            var addTab = function (tabName, $form) {

                //标签html语句
                var $atab = $("<span class='tab'><li><a href='#" + tabName + "'onclick='return false;'>" + tabName +
                    "</a><li class='fa fa-close'></li></li></span>");

                //追加进网页中
                $("#tabs>ul").append($atab);
                $("#tabs_container").append($form);

                //先解绑事件，重新为所有标签绑定点击事件
                $('#tabs>ul>span>li>a').unbind('click');
                $('.fa-close').unbind('click');
                $('#tabs>ul>span>li>a').bind('click', function () {
                    $('#tabs_container').children('div').css('display', 'none');
                    $('#tabs>ul>span').removeClass('active');
                    $(this).parent().parent().addClass('active');
                    // $(this).parent().addClass('active');
                    $(($(this).attr('href'))).fadeIn();
                });

                //关闭事件。
                //按顺序remove相应节点
                //关闭一个标签时，手动触发死一个标签，如果没有则不触发
                $('.fa-close').bind('click', function () {
                    $(this).prev().fadeOut();
                    $(this).fadeOut();
                    $($(this).prev().children('a').attr('href')).remove();
                    $(this).prev().remove();
                    $(this).parent().remove();
                    if ($('#tabs>ul').children().length > 0) {
                        $("#tabs>ul>span:eq(0)>li>a:eq(0)").trigger('click');
                    }
                });

                //手动触发新添加的标签的点击事件
                $("[href='#" + tabName + "']").trigger('click');
            };
            //访问兄弟frame框架中的 a 标签，并并绑定点击事件，触发添加标签函数
            var as = $(window.parent.frames["leftFrame1"].document).find('a.useful');
            as.bind('click', function (e) {
                e.stopPropagation();
                e.preventDefault();
                var src = $(this).attr('href');
                var tabName = $(this).text();
                tabName = tabName.toLowerCase().trim().replace(/\s/g, "_");
                if (document.getElementById(tabName)) {
                    $("[href='#" + tabName + "']").trigger('click');
                } else {
                    var $form = $("<div id=" + tabName + ">" +
                        //tabName
                        "<iframe src='"+src+"' scrolling='no' class='formContent'  frameborder='0'></iframe>"

                        +
                        "</div>")
                    addTab(tabName, $form);
                }
            });

            $(as[0]).trigger('click');


            window.setInterval(function () {
                var clientWidth = $(window).width();
                // var clientHeight = $(window).height();
                var clientWidth1 = $(".formContent").contents().find("body").width();
                var clientHeight = $(".formContent").contents().find("body").height();
                // alert(clientWidth +" | "+clientWidth1);
				
                // alert(clientHeight+" | "+clientWidth);
                if(clientHeight < 40 )
                {
                	clientHeight = 1200;
                }
                $('.formContent').css('height', clientHeight + 60 + 'px');
                
                $('.formContent').css('width', '100%');
                // $('.formContent').css('width', clientWidth + 'px');
            }, 50);


        });
    </script>

</body>

</html>